import { StyledCopyIco, StyledDetail } from '../styles/style'
import useDetailHook from '../servers/detailServer'
interface ConfirmModalProps {
	/** 详情信息 */
	detailData: any
}
const LogDetailView = ({ detailData }: ConfirmModalProps) => {
	const { ...useHook } = useDetailHook(detailData)
	return (
		<div>
			<StyledDetail className="detail-wrap">
				{detailData ? (
					<div className="content">
						{useHook.detailLogData.map((item, index) => {
							return (
								<div className="item-wrap" key={`operation-obj` + index}>
									<div className="label">{item.label}</div>
									<div
										className="value"
										title={
											item.value
												.replace('“usbKey” 设置为“”', '操作：usbKey解绑')
												.replace('“usbKey” 设置为', '操作：usbKey绑定为') || '-'
										}
									>
										{item.label === '事件内容'
											? item.value
													.replace('“usbKey” 设置为“”', '操作：usbKey解绑')
													.replace('“usbKey” 设置为', '操作：usbKey绑定为')
													.split('，原因')
													.shift() || '-'
											: item.value
													.replace('“usbKey” 设置为“”', '操作：usbKey解绑')
													.replace('“usbKey” 设置为', '操作：usbKey绑定为') || '-'}
									</div>
								</div>
							)
						})}

						<div>
							<div className="item-wrap">
								<span>备注</span>
								{/* <StyledCopyIco
									className="copy-warp"
									onClick={() => useHook.onCopyClick()}
								></StyledCopyIco> */}
							</div>
							<div className="remark-wrap">
								<div
									className="textArea"
									style={{
										border: '1px solid #4e4e4e',
										padding: '10px',
										height: '143px',
										marginBottom: '12px',
										overflow: 'auto',
										lineHeight: '18px',
									}}
									dangerouslySetInnerHTML={{
										__html: useHook.logRemark.replace(/\s\s+/g, '</br>'),
									}}
								/>
							</div>
						</div>
					</div>
				) : (
					<></>
				)}
			</StyledDetail>
		</div>
	)
}

export default LogDetailView
